<#include "../../common/header.htm">
    <div class="content-wrapper">
        <section class="content">
            <div class="row">
                <div id="commonContactsPeople" >
                    <div class="stream_search" >
                        <el-form :inline="true" ref="call_Form" :model="form" class="demo-form-inline">
                            <el-form-item label="对方号码">
                                <el-input v-model="form.PARTY_NUMBER" placeholder="对方号码"></el-input>
                            </el-form-item>
                            <el-form-item label="通话次数>=">
                                <el-input v-model="form.CONTACTS_COUNT" placeholder="通话次数"></el-input>
                            </el-form-item>
                            <el-form-item label="通话人员>=">
                                <el-input v-model="form.CONTACTS_PEOPLE_COUNT" placeholder="通话人员"></el-input>
                            </el-form-item>
                            <el-form-item class="form_z" label="时间范围">
                                <el-date-picker
                                        v-model="form.begin_time"
                                        name="beginTime"
                                        type="date"
                                >
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item class="el-form-item" label="至">
                                <el-date-picker
                                        v-model="form.end_time"
                                        name="endTime"
                                        type="date"
                                >
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">分析</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button  @click="clear()">重置</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" class="daobtn"  @click="exportExcel">导出</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div style="margin-bottom: 20px;" class="casemanage-switch casemanage-switchtip">
                        <div class="casemanage-zhexiantu active" :class="{active:showType===0}" @click="showType=0;"  title="切换为列表显示">
                            <i class="casemanage-switchtip-list"></i><span>列表</span>
                        </div>
                        <div class="casemanage-relative" @click="show()"  title="切换为关系图显示">
                            <i class="casemanage-switchtip-d3"></i><span>关系图</span>
                        </div>
                    </div>
                    <div class="stream_body" >

                        <div v-show="showType===0">
                            <table id="dg">
                            </table>
                        </div>
                        <div v-show="showType===1">
                            <div id="call_frequencylaw_d3"  style="height: 500px;width: 100%">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <script>
	    var caseId=parent.caseId;
		$(document).ready(function(){
			 $(window).resize(function(){
				$('#dg').datagrid('resize',{
                    height:($(window).height())-($('.stream_search').outerHeight(true))-50,
                });
			});
		});
        function findDimensions() {
            //获取窗口高度
            let winHeight;
            if (window.innerHeight)
                winHeight = window.innerHeight;
            else if ((document.body) && (document.body.clientHeight))
                winHeight = document.body.clientHeight;
            $("#hidebox").css("height",(winHeight-100)+"px");
        }
        findDimensions();
        window.onresize=findDimensions;

        function detailDialog(PARTY_NUMBER,SERVICE_NUMBER) {
            var param = {
                CASEMANAGE_ID:parent.caseId,
                PARTY_NUMBER:PARTY_NUMBER,// 对方号码
                SERVICE_NUMBER:SERVICE_NUMBER,// 主叫号码
                begin_time: getMyDate(commonContactsPeople.form.begin_time),// 开始时间
                end_time: getMyDate(commonContactsPeople.form.end_time),// 结束时间
            };
            var d = top.dialog({
                title : '共同联系人分析详情',
                modal : true,
                url : '${ctx}/phone/record/compeopledetailDialog',
                height : 700,
                width : 1500,
                data : param,
                onshow : function () {
                }
            });
            d.show();
            return false;
        }
        function show(){  //显示隐藏层和弹出层
            commonContactsPeople.getlist_d3();
        }
        let commonContactsPeople=new Vue({
            el:"#commonContactsPeople",
            data:{
                showType:0,
                form: {
                    PARTY_NUMBER: '',
                    FREQUENCY_COUNT: '',
                    begin_time:"",
                    end_time:"",
                    CONTACTS_PEOPLE_COUNT:""
                },
            },
            methods: {
                onSubmit() {
                    if (arr.split(",").length>1){
                        _checkedCallback()
                    }else{
                        toastr.error("请选择两个及两个以上的手机号","提示信息");
                    }

                },
                clear(formName){
                    this.form={
                        PARTY_NUMBER: '',
                        FREQUENCY_COUNT: '',
                        begin_time:"",
                        end_time:"",
                    }
                },
                exportExcel(){
                    if(arr.split(",").length>1){
                        if(!this.form.CONTACTS_COUNT){
                            this.form.CONTACTS_COUNT=1
                        }
                        let a = "FREQUENCY_COUNT="+this.form.FREQUENCY_COUNT+"&CONTACTS_COUNT="+this.form.CONTACTS_COUNT+"&CONTACTS_PEOPLE_COUNT="+this.form.CONTACTS_PEOPLE_COUNT+"&PARTY_NUMBER="+this.form.PARTY_NUMBER+"&begin_time="+getMyDate(this.form.begin_time)+"&end_time="+getMyDate(this.form.end_time)+"&SERVICE_NUMBER="+arr+"&CASEMANAGE_ID="+caseId;
                        window.location.href="${ctx}/callanalysis/export/commonContactsPeople?"+a;
                    }else{
                        toastr.error("请选择两个及两个以上的手机号","提示信息");
                    }
                },
                getlist_d3(){
                	if (arr.length<1){
                        toastr.error("请选择两个及两个以上的手机号","提示信息");
                    }else{
	                	var data = {
	                			PARTY_USER_INFORMATION : this.form.PARTY_USER_INFORMATION,//对方姓名
	                            PARTY_NUMBER : this.form.PARTY_NUMBER,// 对方号码
	                            CONTACTS_COUNT : this.form.CONTACTS_COUNT,// 通话次数
	                            CONTACTS_PEOPLE_COUNT : this.form.CONTACTS_PEOPLE_COUNT,// 通话人数
	                            begin_time : getMyDate(this.form.begin_time),// 开始时间
	                            end_time : getMyDate(this.form.end_time),// 结束时间
	                            SERVICE_NUMBER : arr,
	                            CASEMANAGE_ID:caseId,
	                            reqUrl : '${ctx}/callanalysis/commonContactsPeople_d3'
	                    }
	                	var d = top.dialog({
	                        title : '共同联系人关系图',
	                        modal : true,
	                        data : data,
	                        url : '${ctx}/callanalysis/callAnalysisD3Init',
	                        height : 800,
	                        width : 1500,
	                        onshow : function () {
	                    	}
	                    });
	                    d.show();
	                	return false;
                    }
                },
            }
        })
        function formatTime(time) {
            if(!time){
                return ""
            }else{
                var date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm');
            }
        }

        var arr=""
        _checkedCallback()
        function _checkedCallback() {
            if(parent._checkedPhone&&parent._checkedPhone.length>1){
                arr = parent._checkedPhone.toString()
            }else{
                arr="卡1,卡2"
                toastr.error("请选择两个及两个以上的手机号","提示信息");
            }
            dg();
        }
        /*easyui表格*/
        /** 页面初始化完成 **/
        function dg(){
            var col=[{"field":"ContactsPeople","align":"center", "title":"共同联系人\\机主号码",
                formatter: function(value,row,index){ //当前值，当前的row，当前的索引
                    return value.PARTY_NUMBER;
                }
            }]
            let p_arr=arr.split(",")
            for (let i = 0; i < p_arr.length; i++) {
                let o={"field":p_arr[i],"align":"center", "title":p_arr[i],
                    formatter: function(value,row,index){ //当前值，当前的row，当前的索引
                        if (value&&row.ContactsPeople.PARTY_NUMBER!='汇总累计'){//
                            let PARTY_NUMBER= value.PARTY_NUMBER?value.PARTY_NUMBER:'';
                            let PARTY_NUMBER_LIST= row.ContactsPeople.PARTY_NUMBER?row.ContactsPeople.PARTY_NUMBER:'';
                            let SERVICE_NUMBER= value.SERVICE_NUMBER?value.SERVICE_NUMBER:'';
                            // let str="<a href='#' onclick=\'commonContactsPeople.showDialog(\""+PARTY_NUMBER+"\",\""+PARTY_NUMBER_LIST+"\",\""+SERVICE_NUMBER+"\")\'><span >通话"+value.COUNT+"次</span><br>" +
                            let str="<a href='#' onclick=\'detailDialog(\""+PARTY_NUMBER+"\",\""+SERVICE_NUMBER+"\")\'><span >通话"+value.COUNT+"次</span><br>" +
                                "<span>累计"+value.SUM_TALK_TIME+"秒</span><br>" +
                                "<span>"+formatTime(value.MIN_STARTING_TIME)+"</span><br>" +
                                "<span>"+formatTime(value.MAX_STARTING_TIME) +"</span></a>"
                            return str;
                        }else if (value&&row.ContactsPeople.PARTY_NUMBER=='汇总累计'){
                            let str="<span >通话"+value.COUNT+"次</span><br>" +
                                "<span>累计"+value.SUM_TALK_TIME+"秒</span><br>" +
                                "<span>"+formatTime(value.MIN_STARTING_TIME)+"</span><br>" +
                                "<span>"+formatTime(value.MAX_STARTING_TIME) +"</span>"
                            return str;
                        }  else{
                            return "-";
                        }

                    }
                }
                col.push(o)
            }
            col.push({"field":"total","align":"center", "title":"汇总累计",
                formatter: function(value,row,index){ //当前值，当前的row，当前的索引
                    let str="<span >通话"+value.count_s+"次</span><br>" +
                        "<span>累计"+value.SUM_TALK_TIME_s+"秒</span><br>" +
                        "<span>"+formatTime(value.minTime)+"</span><br>" +
                        "<span>"+formatTime(value.maxTime)  +"</span>"
                    return str;
                }
            })
            $('#dg').datagrid({
                url: '${ctx}callanalysis/commoncontactspeople2_easyui',
                method: 'post',
                queryParams:{//每次请求的参数
                    partyUserInformation:commonContactsPeople.form.PARTY_USER_INFORMATION,//对方姓名
                    contactsCount: commonContactsPeople.form.CONTACTS_COUNT,// 通话次数
                    partyNumber: commonContactsPeople.form.PARTY_NUMBER,// 对方号码
                    contactsPeopleCount:commonContactsPeople.form.CONTACTS_PEOPLE_COUNT,// 通话人数// 通话人数
                    beginTime: getMyDate(commonContactsPeople.form.begin_time),// 开始时间
                    endTime: getMyDate(commonContactsPeople.form.end_time),// 结束时间
                    serviceNumber:arr,
                    caseId:caseId
                },
                pageSize:30,
                pageList:[30,50,100,150,200],
                pageNumber:1,//当前页号,

                loadMsg:"正在加载，请稍后",//加载数据时的提示信息
                emptyMsg:"暂无信息",//加载数据为空时的信息
                height: ($(window).height())-($('.stream_search').outerHeight(true))-50,
                rownumbers:true,//序号
                fitColumns: true,//使表格自适应页面宽度
                singleSelect: true,
                columns:[col],
                onHeaderContextMenu: function(e, field){
                    e.preventDefault();
                    if (!cmenu){
                        createColumnMenu();
                    }
                    cmenu.menu('show', {
                        left:e.pageX,
                        top:e.pageY
                    });
                },
                onLoadSuccess: function(data){//当数据加载成功时触发。
                    console.log("刷新了",data)
                },
                onBeforeRender:function (target, rows) {//视图被呈现前触发。
                    console.log(target, rows)
                }
            });
        }
    </script>
<script src="${ctx}/bower_components/easyui/common/titleHide.js"></script>

    <style>
        .el-form-item{
            margin-bottom: 10px;
        }
        .el-form-item.daobtn{
            background-color: #23B7E5;
            border-color: #23B7E5;
        }
        #hidebg {
            position:absolute;
            left:0px;
            top:0px;
            background-color:#000;
            width: 100%;
            height: 100%;
            filter:alpha(opacity=60);  /*设置透明度为60%*/
            opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
            display:none;
            z-Index:999;
        }
        #hidebox {
            text-align: right;
            position:absolute;
            width: 96%;
            height: 82%;
            top: 23px;
            left: 2%;
            border-radius: 5px;
            background-color:#fff;
            display:none;
            z-Index:9999;
            padding: 10px;
        }
        .outAccount_d3_head {
            float: left;
            font-size: 20px;
            margin-bottom: 12px;
        }
        #hidebox span{
            font-size: 20px;
        }
        svg {
            height: 96%;
            width: 100%;
        }
        .casemanage-relative:focus {
            border-color: #4695ed;
        }
        .el-table.el-table--fit.el-table--striped.el-table--enable-row-hover {
            border-radius: 4px;
        }
        .el-form-item.form-z {
            margin-right: 7px !important;
        }
        .el-form--inline .el-form-item__label{
            font-size: 13px;
            font-weight: 400;
        }
        .el-input__inner{
            font-size: 12px;
        }
        .stream_body {
            padding-left: 5px;
            padding-right: 10px;
            font-style: normal;
        }
        .stream_search{
            margin: 0 0 -5px 0;
        }
        .content {
            padding: 18px 25px 15px 25px;
        }
        .el-form-item__label{
            color: #6f7689;
        }
        .el-form--inline .el-form-item{
            margin-top: -11px;
        }
        .el-button{
            padding: 8px 15px;
            width: 70px;
            height: 32px;
            margin-right: -15px;
        }
        .el-button:focus, .el-button:hover {
            background-color: #e7e7e7;
            border-color: #adadad;
        }
        button.el-button.el-button--default:hover {
            color: #333;
        }
        button.el-button.el-button--default:focus {
            color: #333;
        }
        .el-button:active {
            border-color: #adadad;
            background-color: #e7e7e7;
        }
        .el-dialog--small{
            width: 88%;
        }
        .el-table th:first-child > .cell:first-child{
            width:auto
        }
        .el-button--primary{
            background-color:#4695ed;
            border-color:#4695ed;
        }
        .el-button--primary:focus, .el-button--primary:hover{
            background: #61a8f5;
            border-color: #61a8f5;
        }
        .casemanage-switch .casemanage-list{
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }
        .el-input__inner{
            border-color: #D2D6DE;
            border-color: #e4e4e4;
        }
        .el-input__inner:hover{
            border-color:#4695ed;
        }
        .el-input__inner:focus{
            border-color:#4695ed;
        }
        .el-table th>.cell {
            white-space: nowrap;
        }
        .el-table .cell{
            line-height: 15px;
        }
        .el-table td, .el-table th{
            padding: 0px 0;
        }
    </style>